<template>
  <div class='frozeeDetail'>
    <el-dialog title="冻结金额明细" :visible.sync="isShow" center>
      <el-table
        :data="tableData"
        ref="table"
        stripe
        border
        :show-header='false'
        v-infinite-scroll="load"
        infinite-scroll-delay='1000'
        infinite-scroll-immediate= 'false'
        infinite-scroll-disabled="disabled"
        style="width: 100%">
        <el-table-column prop="payMethod" label="支付方式" align="center">
          <template slot-scope="scope">
            {{ scope.row | payMethod }}
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" align="center">
          <template slot-scope="scope">
            {{ scope.row.type | userPurseType }}
          </template>
        </el-table-column>
        <el-table-column prop="money" align="center" label="金额">
          <template slot-scope="scope">
            <span :class="scope.row.money >= 0 ? 'font_success' : 'font_danger'">{{ scope.row.money > 0 ? `+${scope.row.money}` : scope.row.money}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" align="center" label="时间">
          <template slot-scope='scope'>
            {{ scope.row.created_at}}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data () {
    return {
      isShow: false,
      tableData: [],
      page: 0,
      noMore: false,
    }
  },
  computed: {
    disabled () {
      return this.noMore
    },
  },
  methods: {
    load() {
      this.page ++
      let params = {
        page: this.page
      }
      this.getDetailsData(params, true)
    },
    show (data) {
      if (data) {
        let params = {
          start_time: data[0],
          end_time: data[1],
          type: '2,3,4,5'
        }
        this.getDetailsData(params)
      } else {
        this.getDetailsData()
      }

      this.isShow = true
    },
    getDetailsData (pParams, scrollData) {

      let params = {
        start_time: `${moment().format("YYYY-MM")}-01`,
        end_time: `${moment().format("YYYY-MM")}-31`,
      }
      if (pParams) {
        params = pParams
      }
      params.is_frozee = 1
      this.$axios.get('api/drawing/wallet/consumer_detail', {
        params: params
      }).then(res => {
        if (res.data.code == 200) {
          if (scrollData) {
            let data = res.data.data
            if (data.length == 0) {
              this.noMore = true
            }
            this.tableData = this.tableData.concat(data)
          } else {
            this.tableData = res.data.data
          }
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
  }
}
</script>

<style lang='less' type='text/css'>
  .frozeeDetail {
    .el-dialog {
      .el-table {
        max-height: 400px;
      }
    }
  }
</style>
